<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button v-on:click="count--">-</button>{{count}}<button @click="count++">+</button>
        <br>
        count不能小于0，基于三元表达式实现
        <button v-on:click="count > 0 ? count-- : count">-</button>{{count}}<button @click="count++">+</button>
        <br>
        count不能小于0，methods方法实现
        <button v-on:click="mouse">-</button>{{count}}<button @click="add">+</button>
        <br>
        count不能小于0，methods方法实现，每次加减为由传参决定
        <button v-on:click="mouse(5, $event)">-</button>{{count}}<button @click="add(5, $event)">+</button>
        <br>
        count不能小于0，methods方法实现，每次加减为由传参决定
        <button v-on:click="mouse(5, $event)">-</button>{{count}}<button @click="add(5, $event)" @keyup.13="add(5, $event)">+</button>
        <input @keyup.13="onEnter">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                count: 0
            },
            methods: {
                mouse(args, event) {

                    if (this.count > 0) {
                        if (typeof args === "number") {
                            this.count = this.count - args;
                        }else {
                            this.count--
                            console.log(args, event);
                        }
                    }
                },
                add(args, event) {
                    console.log(event);

                    if (typeof args === "number") {
                        this.count = this.count + args;
                    }else {
                        this.count++;
                        console.log(args, event);
                    }
                },
                onEnter() {
                    console.log("onEnter");
                }
            }
        })
    </script>
</body>
</html>